<script lang="ts" setup>
import { Empty, showLoadingToast, closeToast } from "vant";
import { ref, onMounted, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import NoData from "@/image/new_img/activity/no_data.svg";
import { ActivityAxios } from "@/api";
import { UserStore } from "@/store";
import { ActTreasureBoxRecordList } from "@/types";
import { useRouter } from "vue-router";
import { FiltrationFun } from "@/utils";
const userStore = UserStore();
const { t } = useI18n();
const checked = ref(true);
const router = useRouter();
const totalbet = ref(0);
const totalrecharge = ref(0);
const appWidth = ref(window.innerWidth);
onMounted(() => {
  totalbet.value = (router.currentRoute.value.query.totalbet || 0) as number;
  totalrecharge.value = (router.currentRoute.value.query.totalrecharge || 0) as number;
  if (userStore.isLogin) {
    getTreasureBoxRecord();
  }
  //监听页面大小
  const appElement = document.getElementById("app");
  if (appElement) {
    // 开始监听 #app 元素的尺寸变化
    resizeObserver.observe(appElement);
  }
});
const frameDivHeight = ref(1000);
// 创建 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    // 获取 #app 元素的宽度并更新
    if (entry.target.id === "app") {
      appWidth.value = entry.contentRect.width;
      if (appWidth.value > 375) {
        frameDivHeight.value = 1000;
      } else {
        frameDivHeight.value = 667;
      }
    }
  });
});
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const subordinateList = ref<ActTreasureBoxRecordList[]>([]);
const inintType = ref(false);
//获取宝箱下属信息
const getTreasureBoxRecord = () => {
  showLoadingToast({
    message: "Loading...",
    forbidClick: true,
  });
  ActivityAxios.getTreasureBoxRecord({
    isValid: checked.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    totalBet: Number(totalbet.value),
    totalRecharge: Number(totalrecharge.value),
  })
    .then(res => {
      total.value = res.total;
      subordinateList.value = subordinateList.value.concat(res.list);
      inintType.value = true;
      closeToast();
    })
    .catch(() => {
      closeToast();
    });
};
const togglType = () => {
  checked.value = checked.value ? false : true;
  if (userStore.isLogin) {
    pageNo.value = 1;
    pageSize.value = 10;
    total.value = 0;
    subordinateList.value = [];
    inintType.value = false;
    getTreasureBoxRecord();
  }
};
//加载下一页
const onLoad = () => {
  if (inintType && subordinateList.value.length >= total.value) {
    return false;
  }
  pageNo.value = pageNo.value + 1;
  getTreasureBoxRecord();
};
onUnmounted(() => {
  const appElement = document.getElementById("app");
  if (appElement) {
    // 停止监听 #app 元素的尺寸变化
    resizeObserver.unobserve(appElement);
  }
});
</script>
<template>
  <!-- 宝箱的下级列表 -->
  <div class="frame-div" :style="{ height: frameDivHeight + 'px' }">
    <!-- <NavigationBar :navigationName="t('navigationBar.subordinateList')" /> -->
    <!-- <div class="interval-frame"></div> -->
    <div class="list-name-frame">
      <div class="list-title">
        {{ t("activity.subordinateList.previousPost") }}
      </div>
      <div class="card-frame df ai-center jc-space-between">
        <div class="left-frame">{{ t("activity.subordinateList.previousPost") }}</div>
        <div class="right-frame">
          >= <text class="num-frame">{{ totalrecharge / 100 }}</text>
        </div>
      </div>
      <div class="card-frame df ai-center jc-space-between">
        <div class="left-frame">{{ t("activity.subordinateList.bettingOnTheGame") }}</div>
        <div class="right-frame">
          >= <text class="num-frame">{{ totalbet / 100 }}</text>
        </div>
      </div>
      <div class="card-title-frame df ai-center jc-space-between">
        <div class="user-bai-frame df ai-center">
          <img class="user-bai" src="@/image/new_img/activity/user_bai.png" />
          {{ t("activity.subordinateList.subordinate") }}
        </div>
        <div class="switch-frame df ai-center">
          <div>{{ t("activity.subordinateList.effective") }}</div>
          <img
            v-show="!checked"
            class="switch-img"
            src="@/image/new_img/activity/kaiguan_guan.png"
            @click="togglType()"
          />
          <img
            v-show="checked"
            class="switch-img"
            src="@/image/new_img/activity/kaiguan_kai.png"
            @click="togglType()"
          />
        </div>
      </div>
      <div class="label-frame df ai-center jc-space-between">
        <div class="name-frame df ai-center">
          {{ t("activity.subordinateList.name") }}
        </div>
        <div class="deposit-frame df ai-center jc-center">
          {{ t("activity.subordinateList.deposit") }}
        </div>
        <div class="bets-frame df ai-center jc-flex-end">
          {{ t("activity.subordinateList.bets") }}
        </div>
      </div>
      <div class="list-frame" v-if="subordinateList.length > 0">
        <div
          class="df ai-center listData"
          v-for="(item, index) in subordinateList"
          :key="index"
          :class="{ 'backg-color': (index + 1) % 2 !== 0 }"
        >
          <div class="df ai-center jc-space-between name-frame">
            <div class="user-info-frame">
              <div class="user-name omit-1">
                {{ item.name == "" ? "BR11_9848" + index : item.name }}
              </div>
              <div class="user-uid">ID:{{ item.uid }}</div>
            </div>
            <div class="baoxiang-img-frame df ai-center jc-center">
              <img src="@/image/new_img/activity/baoxiang_hui.svg" />
            </div>
          </div>
          <div class="df deposit-frame df ai-center jc-flex-end">
            {{ FiltrationFun.formatNumber(item.cumulativeRecharge / 100) }} /
            {{ totalrecharge / 100 }}
          </div>
          <div class="df bets-frame df ai-center jc-flex-end">
            {{ FiltrationFun.formatNumber(item.cumulativeBet / 100) }} /
            {{ totalbet / 100 }}
          </div>
        </div>
        <div class="noMore-frame">
          <span v-if="subordinateList.length < total && inintType" @click="onLoad">{{
            t("tip.loadMore")
          }}</span>
          <span v-if="subordinateList.length == total && inintType">{{
            t("systemNotify.noMore")
          }}</span>
        </div>
      </div>
      <Empty
        image-size="160"
        v-if="subordinateList.length === 0"
        :image="NoData"
        :description="t('gameLog.noRecordYet')"
        class="empty-frame"
      />
    </div>
  </div>
</template>
<style lang="less" scoped>
.frame-div {
  width: 100%;
  background-image: linear-gradient(158deg, rgb(243, 154, 79) 0%, rgb(164, 0, 255) 100%);
}
.list-name-frame {
  width: calc(100% - 62px);
  height: 100%;
  margin-left: 31px;
  .list-title {
    width: 100%;
    height: auto;
    color: #fff;
    font-size: 28px;
    margin-top: 42px;
    padding-bottom: 8px;
  }

  .card-frame {
    width: 100%;
    height: 84px;
    color: hsla(0, 0%, 100%, 0.65);
    background: hsla(0, 0%, 100%, 0.08);
    margin-top: 8px;
    font-size: 24px;
    border-radius: 14px;

    .num-frame {
      color: rgb(255, 238, 0);
      font-size: 28px;
      font-weight: 700;
    }

    .left-frame {
      margin-left: 25px;
    }

    .right-frame {
      margin-right: 25px;
    }
  }

  .card-title-frame {
    width: 100%;
    height: 100px;
    border-radius: 14px;
    background-image: linear-gradient(98deg, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 100%, 0.04));
    margin-top: 50px;

    .user-bai-frame {
      font-size: 28px;
      color: #ffffff;

      .user-bai {
        width: 40px;
        height: 40px;
        margin-left: 13px;
        margin-right: 10px;
      }
    }

    .switch-frame {
      font-size: 24px;
      color: #ffffff;

      .switch-img {
        width: 66px;
        height: 34px;
        margin-right: 26px;
        margin-left: 6px;
      }
    }
  }

  .label-frame {
    width: 100%;
    height: 100px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background: hsla(0, 0%, 100%, 0.25);
    margin-top: 7px;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    box-shadow: inset 0 -1px 0 0 hsla(0, 0%, 100%, 0.15);
    .name-frame {
      padding-left: 28px;
      width: 258px;
      height: 50px;
      border-right: 1px solid rgba(255, 255, 255, 0.15);
      font-size: 26px;
      font-weight: 700;
    }

    .deposit-frame {
      width: 188px;
      height: 50px;
      border-right: 1px solid rgba(255, 255, 255, 0.15);
      font-size: 26px;
      font-weight: 700;
    }
  }
  .bets-frame {
    flex: 1;
    height: 50px;
    padding-right: 28px;
    font-size: 26px;
    font-weight: 700;
  }
}
.list-frame {
  width: 100%;
  height: calc(100% - 454px);
  overflow-y: auto;
  color: #fff;
  &::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
  .listData {
    width: 100%;
    height: 100px;
    color: #ffffffd9;
    .name-frame {
      width: 258px;
      height: 100%;
    }
    .deposit-frame {
      width: 188px;
      height: 50px;
      font-size: 26px;
      color: #ffffffa6;
    }
    .bets-frame {
      flex: 1;
      height: 50px;
      font-size: 26px;
      color: #ffffffa6;
    }
  }
  .backg-color {
    background-color: #ffffff14;
  }
  .baoxiang-img-frame {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.15);
    img {
      width: 34px;
      height: 34px;
    }
  }
  .user-info-frame {
    margin-left: 28px;
    .user-name {
      font-size: 24px;
      color: #ffffffd9;
      width: 160px;
    }
    .user-uid {
      color: #ffffff73;
      font-size: 20px;
      margin-top: 10px;
    }
  }
}
.noMore-frame {
  font-size: 24px;
  height: 77px;
  line-height: 77px;
  text-align: center;
  font-size: 28px;
  color: #ffffffd9;
  margin-bottom: 40px;
}
.empty-frame {
  margin-top: 20px;
}
:deep(.van-empty__description) {
  font-size: 28px;
}
</style>
